<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div v-html="div"></div>
    <div v-text="div"></div>
    
    
    <button v-if="isExit==1">123456</button>
    <button v-else-if="isExit==2">456</button>
    <button v-else="isExit==3">12345678</button>


    <button v-show='isShow==1'>123456</button>

    <!-- 单向数据绑定 v-bind -->
    <input type="text" :value="isShow" :file=" 'xxx' ">
    <br/>
    <button @click="changeValue">点我改变myValue</button>
    <br/>
    <button @click="isShow='3'">点我改变myValue</button>
    <br/>
    <!-- 双向数据绑定 v-moudel -->
    <input type="text" v-model="isShow">
    <p v-text="isShow"></p>
    <div v-for="(item,index) in stus" ::key="item.name">
        {{index}}{{item.name}}
    </div>  
    <div v-for="(value,key,index) in stus_t" ::key="value">
        {{index}}{{key}}{{value}}
    </div>  
  </div>
</body>
<!-- 1.引入vue.js -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    // 2. 实例化
    new Vue({
        // 3.配置options对象
        // el：发生行为的目的地
        el:'#app',
        // template ：装载的模板
        // 动态数据的声明
        data:()=>{
            return {
                div:'<span>ddd</span>',
                isExit:2,
                isShow:1,
                stus:[
                    {name:'张三'},
                    {name:'张三'},
                    {name:'张三'}
                ],
                stus_t:{
                    'name':111,
                    'name2':111,
                    'name3':111
                }
            }
        },
        methods:{
            changeValue(){
                this.isShow=2
            }
        }
    })



</script>


</html>